import { SketchPicker } from 'react-color';
import React, { useState } from 'react';
import '../less/index.less';

export default function ThemeColor({ value, onChange }) {
  const [display, setDisplay] = useState(false);
  const onClick = () => {
    setDisplay(!display);
  };

  const defaultColor = ['#103648',
    '#1890ff', '#13c2c2', '#52c41a',
    '#f5222d', '#fa541c', '#fa8c16',
    '#faad14', '#fadb14', '#a0d911',
    '#2f54eb', '#722ed1', '#eb2f96',
    '#009688', '#2f54eb', '#006d75',
  ];

  return <div className='theme-color' value={value}>
    <div className='color' style={{ backgroundColor: value }} onClick={onClick}></div>
    {display ? <div className='popover' onClick={onClick}>
      <SketchPicker disableAlpha={true} width={210} color={value}
                    presetColors={defaultColor}
                    onChange={color => onChange(color.hex)}/>
    </div> : null}
  </div>;
}
